<template>
    <view class="glo-form" :style="{ height: height + 'rpx', padding: padding }">
        <view class="item-label" :class="{ 'required': required }">{{ label }}</view>
        <view class="item-val">
            <input type="text" class="inp" :placeholder="placeholder" :disabled="type === 'select'">
            <sc-icon name="arrow-right" class="icon" color="#909399" size="25" v-if="type === 'select'"></sc-icon>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        height: {
            type: String,
            default: '90'
        },
        label: {
            type: String,
            default: ''
        },
        required: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
            default: 'input',
            validator: (val) => {
                return ['input', 'select'].includes(val)
            }
        },
        placeholder: {
            type: String,
            default: '请输入'
        },
        padding: {
            type: String,
            default: '0 75rpx 0 60rpx'
        }
    },
    data() {
        return {

        }
    }
}
</script>

<style lang="scss" scoped>
.glo-form {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .item-label {
        position: relative;
        width: 250rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        font-size: 26rpx;
        color: #3D3D3D;
        line-height: 45rpx;

        &.required {
            &::before {
                position: absolute;
                left: -15rpx;
                content: '*';
                color: #FF0000;
            }
        }
    }

    .inp {
        text-align: right;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        font-size: 23rpx;
        color: #909399;
    }

    .item-val {
        display: flex;
        align-items: center;
        gap: 15rpx;
    }
}
</style>